<template>
  <div class="min-h-screen flex flex-col">
    <!-- 响应式导航栏 -->
    <nav class="bg-white shadow-lg">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold">{{ $t('brand') }}</h1>
          </div>
          
          <!-- 导航菜单 -->
          <div class="hidden md:flex items-center space-x-8">
            <NuxtLink to="/auth/login" class="hover:text-blue-600">
              {{ $t('auth.login') }}
            </NuxtLink>
            <NuxtLink to="/auth/register" class="hover:text-blue-600">
              {{ $t('auth.register') }}
            </NuxtLink>
            <LanguageSwitcher />
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-1">
      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <NuxtPage />
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-100 mt-auto">
      <div class="max-w-7xl mx-auto py-4 px-4">
        <p class="text-center text-gray-600">
          © {{ new Date().getFullYear() }} Company Name
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
// 语言切换组件
const LanguageSwitcher = {
  setup() {
    const { locale, locales } = useI18n()
    const switchLocalePath = useSwitchLocalePath()

    return {
      locale,
      locales,
      switchLocalePath
    }
  },
  template: `
    <select 
      v-model="locale"
      @change="$router.push(switchLocalePath(locale))"
      class="border rounded px-2 py-1"
    >
      <option v-for="loc in locales" :key="loc" :value="loc">
        {{ loc.toUpperCase() }}
      </option>
    </select>
  `
}

export default {
  components: {
    LanguageSwitcher
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/variables.scss';
/* 响应式断点 */
@media (max-width: 768px) {
  .md\:flex {
    display: none;
  }
}
</style>